<template>
	<view class="user-order">
		<!-- header -->
		<view class="od-line2" @click="onNav2">

			<view :class="['item', swiperCurrent1 == item.id ? 'line2-active': ''] " :id="item.id" v-for="(item,index) in navList"
			 :key="index">
				{{item.name}}
			</view>
		</view>

		<swiper :duration="300" @change="changeSwiper" class="ud-swiper" :current="swiperCurrent1">
			<!-- 第一块轮播 -->
			<swiper-item v-for="(row,sub) in 3" :key="sub" style="margin-bottom: 100upx;">
				<scroll-view :scroll-y="true"  class="scrollStyle" @scrolltolower="loadMore(sub)">
					<view class="no-orderList" v-if="orderAssessList.length==0">
						<text>暂无相关内容</text>
					</view>
					<view v-else class="od-line3"  v-for="(item,index) in orderAssessList" :key="index">
						<view class="content-line1">
							<!-- 54 -->
							<image :src="item.shop_img" mode="" style="margin-right: 10upx;" class="order-icon"></image>
							<text class="line1-text2 font30">{{item.shop_name}}</text>
							<text class="iconfont">&#xe600;</text>
							<text class="order-status">{{item.status_name}}</text>
							<!-- 订单号:12345678910 -->
						</view>
						<view class="content-line2">
							<view class="line1-text1">
								<image :src="item.pro_img" mode=""></image>
							</view>
							<view class="line1-text2 font28">
								<view class="content-title">
									{{item.pro_name}}
								</view>
								<view class="price">
									<text class="font30">
										￥{{item.or_price}}
									</text>
									</br>
									<text class="font24">
										×{{item.or_pronum}}
									</text>
								</view>
								<view class="order-number">
									订单号:{{item.orid}}
								</view>
							</view>
						</view>
						<view class="content-line3">
							<view class="line3-l font24" v-if="item.status == 3" @click="navEvaluation(item)">
								<text class="button3">去评价</text>
							</view>
							<view class="line3-r">
								<text class="font24 ">
									共{{item.or_pronum}}件商品
								</text>
								<text class="font24 padding13">
									合计：
								</text>
								<text class="font30 money">
									￥{{item.or_pronum * item.or_price}}
								</text>
							</view>
						</view>
					</view>
					<!-- 上拉加载区域 -->
					<view v-show="isUpLoading" class="load">
						<view class="load-tip">{{loadingText}}</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadingMask: false,
				isUpNoMore: false, // 上拉加载: 是否显示 "-- END --"
				isUpLoading: false, // 上拉加载: 是否显示 "加载中..."
				loadingText: '', //加载文字
				swiperCurrent1: 0,
				orderAssessList: [],
				current_page: 1,
				navList: [{
					id: '0',
					name: '全部'
				}, {
					id: '1',
					name: '待评价'
				}, {
					id: '2',
					name: '已评价'
				}]
			}
		},
		onLoad(id) {
			if (id) {
				this.assessList(3)
				this.swiperCurrent1 = 2
			}
			this.assessList(1)
		},
		methods: {
			//评价
			navEvaluation(item) {
				let id = item.orid
				uni.navigateTo({
					url: '/pages/order/assess/commentPage?id=' + JSON.stringify(id)
				})
			},
			async assessList(type) {
				console.log("=====123456789")
				console.log(type)
				console.log("=====123456789")
				let res = await this.$http.getUserAssess({
					type: type,
					page: this.current_page
				});
				console.log("=====123456789")
				console.log(res.data)
				this.orderAssessList = res.data
				console.log(this.orderAssessList)
			},
			onNav2(e) {
				this.current_page = 1
				this.swiperCurrent1 = e.target.id
				let type = Number(this.swiperCurrent1) + 1
				this.assessList(type)
			},
			changeSwiper(e) {
				this.swiperCurrent1 = e.target.current
			},
			//加载更多
			loadMore(index) {
				this.isUpLoading = true
				this.loadingText = '加载中...';
				this.current_page++;
				this.getMore(index + 1);
			},
			// 加载更多
			async getMore(index) {
				let result = await this.$http.getUserAssess({
					type: index,
					page: this.current_page
				})
				let data = result.data
				if (result.code == 409 || data.length == 0) {
					this.loadingText = '没有更多数据了';
					return
				}
				this.orderAssessList.push(...data)
				console.log(this.orderAssessList)
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/user-order.scss';
	.user-order{
		height: 100%;
		overflow: hidden;
	}
	/* #ifndef APP-PLUS */
	.ud-swiper {
		width: 100%;
		height: 100% !important;
		background-color: $bg01;
	}

	/* #endif */
	/* #ifdef APP-PLUS */
	.ud-swiper {
		width: 100%;
		height: calc(100% - 250upx);
		overflow: hidden;
		// height: 800upx;
		// background-color: $bg01;
	}

	/* #endif */
	.od-line2 .line2-active:after {
		left: 100upx;
	}

	.od-line3 .content-line3 {
		height: 110upx;
		line-height: 110upx;
	}

	.od-line3 .content-line3 .line3-l {
		line-height: 110upx;
	}

	.load {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.load-tip {
			font-size: 24upx;
			color: #999999;
		}
	}

	.no-orderList {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #999999;
		padding-top: 30%;
	}
</style>
